<div class="full-view">
  <!-- 组件 -->
  <router-outlet></router-outlet>
  <!--<nz-tabset class="tabs">-->
    <!--&lt;!&ndash; 行政区划 &ndash;&gt;-->
    <!--<nz-tab [nzTitle]="titleTemplate2">-->
      <!--<ng-template #titleTemplate2>-->
        <!--<div><img src="./assets/images/map/region-1.png" alt="" />行政区划</div>-->
      <!--</ng-template>-->
      <!--<app-map-region (changeRegion)="onChangeRegion($event)"></app-map-region>-->
    <!--</nz-tab>-->
    <!--&lt;!&ndash; 管理机构 &ndash;&gt;-->
    <!--<nz-tab [nzTitle]="titleTemplate1">-->
      <!--<ng-template #titleTemplate1>-->
        <!--<div><img src="./assets/images/map/org-1.png" alt="" />灌域</div>-->
      <!--</ng-template>-->

      <!--<nz-cascader [nzTriggerAction]="'hover'" [nzExpandTrigger]="'hover'" [nzOptions]="organization"-->
        <!--[nzLabelProperty]="'manageName'" [nzValueProperty]="'id'" [nzAllowClear]="false" nzPlaceHolder=""-->
        <!--[(ngModel)]="orgSelected" [nzChangeOn]="validate" (ngModelChange)="onChangeOrg($event)"></nz-cascader>-->
    <!--</nz-tab>-->
  <!--</nz-tabset>-->
  <div class="icon-ctrl" (click)="layerToggle = !layerToggle">
    <img src="./assets/images/map/icon-ctrl.png" alt="">
  </div>

  <div class="layer-box" [hidden]="!layerToggle">
    <!-- 专题图 -->
    <div class="title">
      <img src="./assets/images/map/icon-zhuanti.png" alt="">专题图
    </div>

    <ul class="zhuanti">
      <li *ngFor="let item of ztList; let idx = index" [class.active]="ztActive == idx"
        (click)="onActiveZT(idx)">
        <img class="zt-icon" [src]="'./assets/images/map/zhuanti/' + item.icon + '.png'" alt="" />
        <img class="zt-icon-1" [src]="'./assets/images/map/zhuanti/' + item.icon + '-1.png'" alt="" />
        <span>{{ item.name }}</span>
      </li>
    </ul>

    <!-- 图层选择 -->
    <div class="title title2">
      <img src="./assets/images/map/tree-1.png" alt="">图层
      <label class="check-all" nz-checkbox [(ngModel)]="checkAll" (ngModelChange)="onCheckAll()">全选</label>
    </div>
    <app-map-tree [mapTreeData]="treeNode" (nodeSelected)="onNodeSelected($event)"
      (checkboxChange)="onNodeSelected($event)"></app-map-tree>
  </div>

  <div class="btn-rotation" (click)="setRotation()">
    <div>切换版式</div>
  </div>
  <!-- 搜索框 -->
  <div class="search-wrapper">
    <app-map-search (itemSelect)="onSearchSelect($event)"></app-map-search>
  </div>
  <!-- 对象统计 -->
  <div class="statistic">
    <span>已选对象</span>
    <span>{{ totalSelected }}</span>
    <span>(个)</span>
  </div>
  <!-- 地图 -->
  <up-unified-map #map (mapInitialized)="mapInitialized($event)" [enableCompass]="false" [enableSwitchMapMode]="false"
    [enableBaseLayerPick]="false" [homeButton]="false"
    [sidePaneWidth]="330" [sidePaneDefaultOpen]="false" [topGap]="48" [bottomGap]="40" [rightGap]="10"
    [initViewRange]="viewRange"
    [initDataset]="initDataset" (entityClick)="entityClick($event)"
    (entityHoverChange)="entityHovered($event)">
    <!-- 右侧组件 -->
    <div class="side-container" sideContainer>
      <app-map-panel [panelData]="panelItem" (buildingSelect)="onBuildingSelect($event)">
      </app-map-panel>
    </div>
  </up-unified-map>

  <app-base-layer-picker [selectedDataset]="initDataset"></app-base-layer-picker>

  <!-- 选中动画 -->
  <div [hidden]="!mapUiService.showTwinkle" id="scatter-animation">
    <div id="css_animation"></div>
  </div>
</div>
